<#def title = "颜色定义"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "颜色定义是指在ZhiqimUI的核心CSS文件中，默认提供的全局、白色、黑色和红、橙、黄、绿、青、蓝、紫共十种颜色的定义，包括字体颜色、背景颜色和边框颜色等，以及对应的样式名称。"/>
<#def prevUrl = "css.htm"/>
<#def nextUrl = "font.htm"/>
${zhiqim_com_header()}
${zhiqim_com_topnav()}

<!--容器开始 -->
<div id="container" class="container">
<!--边导航-->
${zhiqim_com_ui("tutorial", "ui", "css", "color")}

<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("文库", "教程", "颜色定义")}
<div class="content">

<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
    <p class="z-text-blue">颜色定义：</p>
    <p class="z-color-333" style="text-indent:38px;">
        颜色定义是指在ZhiqimUI的核心CSS文件中，默认提供的全局、白色、黑色和红、橙、黄、绿、青、蓝、紫共十种颜色的定义，包括字体颜色、背景颜色和边框颜色等，以及对应的样式名称。
    </p>
</div>

<#var colorMap = Jsons.toMapSS(context.getResourceString("/document/tutorial/ui/css/zhiqim.pre.json", "UTF-8"))/>

<#-- 全局颜色 -->
<div class="tutorial title">全局颜色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="15%">名称</td>
    <td width="22%">通配符</td>
    <td width="14%">缺省值</td>
    <td width="10%">举例</td>
    <td width="*">说明</td>
</tr>
<tr>
    <td>全局文本颜色</td>
    <td class="z-samp">&#x24;{textColor}</td>
    <td class="z-samp">${colorMap.get("textColor")}</td>
    <td>全局颜色</td>
    <td>全局颜色定义，定义在body中</td>
</tr>
<tr>
    <td>全局背景颜色</td>
    <td class="z-samp">&#x24;{bgColor}</td>
    <td class="z-samp">${colorMap.get("bgColor")}</td>
    <td>全局背景</td>
    <td>全局背景颜色，定义在body中</td>
</tr>
<tr>
    <td>全局链接颜色</td>
    <td class="z-samp">&#x24;{linkColor}</td>
    <td class="z-samp">${colorMap.get("linkColor")}</td>
    <td rowspan="2"><a href="javascript:void(0);">链接效果</a></td>
    <td>全局链接颜色，定义在a,a:visited中</td>
</tr>
<tr>
    <td>全局链接Hover颜色</td>
    <td class="z-samp">&#x24;{linkHoverColor}</td>
    <td class="z-samp">${colorMap.get("linkHoverColor")}</td>
    <td>全局链接颜色，定义在a:hover,a:focus,a:active中</td>
</tr>
</table>

<#-- 白色 -->
<div class="tutorial title">白色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="15%">名称</td>
    <td width="22%">通配符</td>
    <td width="14%">缺省值</td>
    <td width="10%">举例</td>
    <td width="*">说明</td>
</tr>
<tr>
    <td>白色文本</td>
    <td class="z-samp">&#x24;{whiteTextColor}</td>
    <td class="z-samp">${colorMap.get("whiteTextColor")}</td>
    <td class="z-bg-black"><span class="z-text-white">白色文本</span></td>
    <td>.z-text-white</td>
</tr>
<tr>
    <td>白色背景</td>
    <td class="z-samp">&#x24;{whiteBgColor}</td>
    <td class="z-samp">${colorMap.get("whiteBgColor")}</td>
    <td class="z-bg-white"><span class="z-text-black">白色背景</span></td>
    <td>.z-bg-white</td>
</tr>
</table>

<#-- 黑色 -->
<div class="tutorial title">黑色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="15%">名称</td>
    <td width="22%">通配符</td>
    <td width="14%">缺省值</td>
    <td width="10%">举例</td>
    <td width="*">说明</td>
</tr>
<tr>
    <td>黑色文本</td>
    <td class="z-samp">&#x24;{blackTextColor}</td>
    <td class="z-samp">${colorMap.get("blackTextColor")}</td>
    <td><span class="z-text-black">黑色文本</span></td>
    <td class="z-samp">.z-text-black</td>
</tr>
<tr>
    <td>黑色背景</td>
    <td class="z-samp">&#x24;{blackBgColor}</td>
    <td class="z-samp">${colorMap.get("blackBgColor")}</td>
    <td class="z-bg-black"><span class="z-text-white">黑色背景</span></td>
    <td class="z-samp">.z-bg-black</td>
</tr>
</table>

<#-- 灰色 -->
<div class="tutorial title">灰色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="15%">名称</td>
    <td width="22%">通配符</td>
    <td width="14%">缺省值</td>
    <td width="10%">举例</td>
    <td width="*">说明</td>
</tr>
<tr>
    <td>灰色文本</td>
    <td class="z-samp">&#x24;{grayTextColor}</td>
    <td class="z-samp">${colorMap.get("grayTextColor")}</td>
    <td><span class="z-text-gray">灰色文本</span></td>
    <td class="z-samp">.z-text-gray</td>
</tr>
<tr>
    <td>灰色背景</td>
    <td class="z-samp">&#x24;{grayBgColor}</td>
    <td class="z-samp">${colorMap.get("grayBgColor")}</td>
    <td class="z-bg-gray"><span class="z-text-gray">灰色背景</span></td>
    <td class="z-samp">.z-bg-gray</td>
</tr>
<tr>
    <td>灰色边框</td>
    <td class="z-samp">&#x24;{grayBdColor}</td>
    <td class="z-samp">${colorMap.get("grayBdColor")}</td>
    <td><span class="z-bd z-text-gray z-pd3">灰色边框</span></td>
    <td class="z-samp">.z-bd</td>
</tr>
<tr>
    <td>灰色按钮文本</td>
    <td class="z-samp">&#x24;{btnTextColor}</td>
    <td class="z-samp">${colorMap.get("btnTextColor")}</td>
    <td><span class="z-bd z-pd3" style="color:${colorMap.get("btnTextColor")};">灰色按钮</span></td>
    <td rowspan="4" class="z-bd-l">
    <div>
        <div class="z-button">灰色按钮</div>
        <div class="z-button z-bordered-bg">灰色按钮</div>
        （按钮、筛选按钮）
    </div>
    <div class="z-mg-t10">
        <div class="z-button z-bordered">橙色按钮</div>
        <div class="z-button z-bordered z-hover">橙色按钮</div>
        <div class="z-button z-bordered z-active">橙色按钮</div>
        （多选按钮三种状态）
    </div>
    </td>
</tr>
<tr>
    <td>灰色按钮边框和背景</td>
    <td class="z-samp">&#x24;{btnBdColor}<br>&#x24;{btnBgColor}</td>
    <td class="z-samp">${colorMap.get("btnBdColor")}<br>${colorMap.get("btnBgColor")}</td>
    <td><div class="z-pd3 z-w80 z-h25 z-text-white" style="color:#333;border:1px solid ${colorMap.get("btnBdColor")};background-color:${colorMap.get("btnBgColor")};">灰色按钮</div></td>
</tr>
<tr>
    <td>灰色hover背景</td>
    <td class="z-samp">&#x24;{btnBgHoverColor}</td>
    <td class="z-samp">${colorMap.get("btnBgHoverColor")}</td>
    <td><div class="z-pd3 z-w80 z-h25 z-text-white" style="color:#333;border:1px solid ${colorMap.get("btnBdColor")};background-color:${colorMap.get("btnBgHoverColor")};">灰色按钮</div></td>
</tr>
<tr>
    <td>灰色按钮active背景</td>
    <td class="z-samp">&#x24;{btnBgActiveColor}</td>
    <td class="z-samp">${colorMap.get("btnBgActiveColor")}</td>
    <td><div class="z-pd3 z-w80 z-h25 z-text-white" style="color:#333;border:1px solid ${colorMap.get("btnBdColor")};background-color:${colorMap.get("btnBgActiveColor")};">灰色按钮</div></td>
</tr>
</table>

<#-- 红色 -->
<div class="tutorial title">红色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="15%">名称</td>
    <td width="22%">通配符</td>
    <td width="14%">缺省值</td>
    <td width="10%">举例</td>
    <td width="*">说明</td>
</tr>
<tr>
    <td>红色文本</td>
    <td class="z-samp">&#x24;{redTextColor}</td>
    <td class="z-samp">${colorMap.get("redTextColor")}</td>
    <td><span class="z-text-red">红色文本</span></td>
    <td class="z-samp">.z-text-red</td>
</tr>
<tr>
    <td>红色背景</td>
    <td class="z-samp">&#x24;{redBgColor}</td>
    <td class="z-samp">${colorMap.get("redBgColor")}</td>
    <td class="z-bg-red"><span class="z-text-red">红色背景</span></td>
    <td class="z-samp">.z-bg-red</td>
</tr>
<tr>
    <td>红色边框</td>
    <td class="z-samp">&#x24;{redBdColor}</td>
    <td class="z-samp">${colorMap.get("redBdColor")}</td>
    <td><span class="z-bd z-red z-text-red z-pd3">红色边框</span></td>
    <td>.z-bd.z-red</td>
</tr>
<tr>
    <td>红色按钮边框</td>
    <td class="z-samp">&#x24;{redBtnBdColor}</td>
    <td class="z-samp">${colorMap.get("redBtnBdColor")}</td>
    <td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("redBtnBdColor")};background-color:${colorMap.get("redBdColor")};">红色按钮</div></td>
    <td rowspan="2" class="z-bd-l">
    <div>
        <div class="z-button z-red">红色按钮</div>
        <div class="z-button z-bordered-bg z-red-bg">红色按钮</div>
        <div class="z-button z-bordered-bg z-red-bd z-red-bg">红色按钮</div>
        （按钮、筛选按钮）
    </div>
    <div class="z-mg-t10">
        <div class="z-button z-bordered z-red-bd">红色按钮</div>
        <div class="z-button z-bordered z-red-bd z-hover">红色按钮</div>
        <div class="z-button z-bordered z-red-bd z-active">红色按钮</div>
        （多选按钮三种状态）
    </div>
    </td>
</tr>
<tr>
    <td>红色hover背景</td>
    <td class="z-samp">&#x24;{redHoverColor}</td>
    <td class="z-samp">${colorMap.get("redHoverColor")}</td>
    <td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("redBtnBdColor")};background-color:${colorMap.get("redHoverColor")};">红色按钮</div></td>
</tr>
</table>

<#-- 橙色 -->
<div class="tutorial title">橙色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="15%">名称</td>
    <td width="22%">通配符</td>
    <td width="14%">缺省值</td>
    <td width="10%">举例</td>
    <td width="*">说明</td>
</tr>
<tr>
    <td>橙色文本</td>
    <td class="z-samp">&#x24;{orangeTextColor}</td>
    <td class="z-samp">${colorMap.get("orangeTextColor")}</td>
    <td><span class="z-text-orange">橙色文本</span></td>
    <td class="z-samp">.z-text-orange</td>
</tr>
<tr>
    <td>橙色背景</td>
    <td class="z-samp">&#x24;{orangeBgColor}</td>
    <td class="z-samp">${colorMap.get("orangeBgColor")}</td>
    <td class="z-bg-orange"><span class="z-text-orange">橙色背景</span></td>
    <td class="z-samp">.z-bg-orange</td>
</tr>
<tr>
    <td>橙色边框</td>
    <td class="z-samp">&#x24;{orangeBdColor}</td>
    <td class="z-samp">${colorMap.get("orangeBdColor")}</td>
    <td><span class="z-bd z-orange z-text-orange z-pd3">橙色边框</span></td>
    <td class="z-samp">.z-bd.z-orange</td>
</tr>
<tr>
    <td>橙色按钮边框</td>
    <td class="z-samp">&#x24;{orangeBtnBdColor}</td>
    <td class="z-samp">${colorMap.get("orangeBtnBdColor")}</td>
    <td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("orangeBtnBdColor")};background-color:${colorMap.get("orangeBdColor")};">橙色按钮</div></td>
    <td rowspan="2" class="z-bd-l">
    <div>
        <div class="z-button z-orange">橙色按钮</div>
        <div class="z-button z-bordered-bg z-orange-bg">橙色按钮</div>
        <div class="z-button z-bordered-bg z-orange-bd z-orange-bg">橙色按钮</div>
        （按钮、筛选按钮）
    </div>
    <div class="z-mg-t10">
        <div class="z-button z-bordered z-orange-bd">橙色按钮</div>
        <div class="z-button z-bordered z-orange-bd z-hover">橙色按钮</div>
        <div class="z-button z-bordered z-orange-bd z-active">橙色按钮</div>
        （多选按钮三种状态）
    </div>
    </td>
</tr>
<tr>
    <td>橙色hover背景</td>
    <td class="z-samp">&#x24;{orangeHoverColor}</td>
    <td class="z-samp">${colorMap.get("orangeHoverColor")}</td>
    <td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("orangeBtnBdColor")};background-color:${colorMap.get("orangeHoverColor")};">橙色按钮</div></td>
</tr>
</table>

<#-- 黄色 -->
<div class="tutorial title">黄色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="15%">名称</td>
    <td width="22%">通配符</td>
    <td width="14%">缺省值</td>
    <td width="10%">举例</td>
    <td width="*">说明</td>
</tr>
<tr>
    <td>黄色文本</td>
    <td class="z-samp">&#x24;{yellowTextColor}</td>
    <td class="z-samp">${colorMap.get("yellowTextColor")}</td>
    <td><span class="z-text-yellow">黄色文本</span></td>
    <td class="z-samp">.z-text-yellow</td>
</tr>
<tr>
    <td>黄色背景</td>
    <td class="z-samp">&#x24;{yellowBgColor}</td>
    <td class="z-samp">${colorMap.get("yellowBgColor")}</td>
    <td class="z-bg-yellow"><span class="z-text-yellow">黄色背景</span></td>
    <td class="z-samp">.z-bg-yellow</td>
</tr>
<tr>
    <td>黄色边框</td>
    <td class="z-samp">&#x24;{yellowBdColor}</td>
    <td class="z-samp">${colorMap.get("yellowBdColor")}</td>
    <td><span class="z-bd z-yellow z-text-yellow z-pd3">黄色边框</span></td>
    <td class="z-samp">.z-bd.z-yellow</td>
</tr>
<tr>
    <td>黄色按钮边框</td>
    <td class="z-samp">&#x24;{yellowBtnBdColor}</td>
    <td class="z-samp">${colorMap.get("yellowBtnBdColor")}</td>
    <td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("yellowBtnBdColor")};background-color:${colorMap.get("yellowBdColor")};">黄色按钮</div></td>
    <td rowspan="2" class="z-bd-l">
    <div>
        <div class="z-button z-yellow">黄色按钮</div>
        <div class="z-button z-bordered-bg z-yellow-bg">黄色按钮</div>
        <div class="z-button z-bordered-bg z-yellow-bd z-yellow-bg">黄色按钮</div>
        （按钮、筛选按钮）
    </div>
    <div class="z-mg-t10">
        <div class="z-button z-bordered z-yellow-bd">黄色按钮</div>
        <div class="z-button z-bordered z-yellow-bd z-hover">黄色按钮</div>
        <div class="z-button z-bordered z-yellow-bd z-active">黄色按钮</div>
        （多选按钮三种状态）
    </div>
    </td>
</tr>
<tr>
    <td>黄色hover背景</td>
    <td class="z-samp">&#x24;{yellowHoverColor}</td>
    <td class="z-samp">${colorMap.get("yellowHoverColor")}</td>
    <td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("yellowBtnBdColor")};background-color:${colorMap.get("yellowHoverColor")};">黄色按钮</div></td>
</tr>
</table>

<#-- 绿色 -->
<div class="tutorial title">绿色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="15%">名称</td>
    <td width="22%">通配符</td>
    <td width="14%">缺省值</td>
    <td width="10%">举例</td>
    <td width="*">说明</td>
</tr>
<tr>
    <td>绿色文本</td>
    <td class="z-samp">&#x24;{greenTextColor}</td>
    <td class="z-samp">${colorMap.get("greenTextColor")}</td>
    <td><span class="z-text-green">绿色文本</span></td>
    <td class="z-samp">.z-text-green</td>
</tr>
<tr>
    <td>绿色背景</td>
    <td class="z-samp">&#x24;{greenBgColor}</td>
    <td class="z-samp">${colorMap.get("greenBgColor")}</td>
    <td class="z-bg-green"><span class="z-text-green">绿色背景</span></td>
    <td class="z-samp">.z-bg-green</td>
</tr>
<tr>
    <td>绿色边框</td>
    <td class="z-samp">&#x24;{greenBdColor}</td>
    <td class="z-samp">${colorMap.get("greenBdColor")}</td>
    <td><span class="z-bd z-green z-text-green z-pd3">绿色边框</span></td>
    <td class="z-samp">.z-bd.z-green</td>
</tr>
<tr>
    <td>绿色按钮边框</td>
    <td class="z-samp">&#x24;{greenBtnBdColor}</td>
    <td class="z-samp">${colorMap.get("greenBtnBdColor")}</td>
    <td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("greenBtnBdColor")};background-color:${colorMap.get("greenBdColor")};">绿色按钮</div></td>
    <td rowspan="2" class="z-bd-l">
    <div>
        <div class="z-button z-green">绿色按钮</div>
        <div class="z-button z-bordered-bg z-green-bg">绿色按钮</div>
        <div class="z-button z-bordered-bg z-green-bd z-green-bg">绿色按钮</div>
        （按钮、筛选按钮）
    </div>
    <div class="z-mg-t10">
        <div class="z-button z-bordered z-green-bd">绿色按钮</div>
        <div class="z-button z-bordered z-green-bd z-hover">绿色按钮</div>
        <div class="z-button z-bordered z-green-bd z-active">绿色按钮</div>
        （多选按钮三种状态）
    </div>
    </td>
</tr>
<tr>
    <td>绿色hover背景</td>
    <td class="z-samp">&#x24;{greenHoverColor}</td>
    <td class="z-samp">${colorMap.get("greenHoverColor")}</td>
    <td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("greenBtnBdColor")};background-color:${colorMap.get("greenHoverColor")};">绿色按钮</div></td>
</tr>
</table>

<#--青色 -->
<div class="tutorial title">青色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr>
    <td colspan="5" class="zi-text-cyan">青色</td>
</tr>
<tr bgcolor="#f5f5f5">
    <td width="15%">名称</td>
    <td width="22%">通配符</td>
    <td width="14%">缺省值</td>
    <td width="10%">举例</td>
    <td width="*">说明</td>
</tr>
<tr>
    <td>青色文本</td>
    <td class="z-samp">&#x24;{cyanTextColor}</td>
    <td class="z-samp">${colorMap.get("cyanTextColor")}</td>
    <td><span class="z-text-cyan">青色文本</span></td>
    <td class="z-samp">.z-text-cyan</td>
</tr>
<tr>
    <td>青色背景</td>
    <td class="z-samp">&#x24;{cyanBgColor}</td>
    <td class="z-samp">${colorMap.get("cyanBgColor")}</td>
    <td class="z-bg-cyan"><span class="z-text-cyan">青色背景</span></td>
    <td class="z-samp">.z-bg-cyan</td>
</tr>
<tr>
    <td>青色边框</td>
    <td class="z-samp">&#x24;{cyanBdColor}</td>
    <td class="z-samp">${colorMap.get("cyanBdColor")}</td>
    <td><span class="z-bd z-cyan z-text-cyan z-pd3">青色边框</span></td>
    <td class="z-samp">.z-bd.z-cyan</td>
</tr>
<tr>
    <td>青色按钮边框</td>
    <td class="z-samp">&#x24;{cyanBtnBdColor}</td>
    <td class="z-samp">${colorMap.get("cyanBtnBdColor")}</td>
    <td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("cyanBtnBdColor")};background-color:${colorMap.get("cyanBdColor")};">青色按钮</div></td>
    <td rowspan="2" class="z-bd-l">
    <div>
        <div class="z-button z-cyan">青色按钮</div>
        <div class="z-button z-bordered-bg z-cyan-bg">青色按钮</div>
        <div class="z-button z-bordered-bg z-cyan-bd z-cyan-bg">青色按钮</div>
        （按钮、筛选按钮）
    </div>
    <div class="z-mg-t10">
        <div class="z-button z-bordered z-cyan-bd">青色按钮</div>
        <div class="z-button z-bordered z-cyan-bd z-hover">青色按钮</div>
        <div class="z-button z-bordered z-cyan-bd z-active">青色按钮</div>
        （多选按钮三种状态）
    </div>
    </td>
</tr>
<tr>
    <td>青色hover背景</td>
    <td class="z-samp">&#x24;{cyanHoverColor}</td>
    <td class="z-samp">${colorMap.get("cyanHoverColor")}</td>
    <td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("cyanBtnBdColor")};background-color:${colorMap.get("cyanHoverColor")};">青色按钮</div></td>
</tr>
</table>

<#--蓝色 -->
<div class="tutorial title">蓝色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="15%">名称</td>
    <td width="22%">通配符</td>
    <td width="14%">缺省值</td>
    <td width="10%">举例</td>
    <td width="*">说明</td>
</tr>
<tr>
    <td>蓝色文本</td>
    <td class="z-samp">&#x24;{blueTextColor}</td>
    <td class="z-samp">${colorMap.get("blueTextColor")}</td>
    <td><span class="z-text-blue">蓝色文本</span></td>
    <td class="z-samp">.z-text-blue</td>
</tr>
<tr>
    <td>蓝色背景</td>
    <td class="z-samp">&#x24;{blueBgColor}</td>
    <td class="z-samp">${colorMap.get("blueBgColor")}</td>
    <td class="z-bg-blue"><span class="z-text-blue">蓝色背景</span></td>
    <td class="z-samp">.z-bg-blue</td>
</tr>
<tr>
    <td>蓝色边框</td>
    <td class="z-samp">&#x24;{blueBdColor}</td>
    <td class="z-samp">${colorMap.get("blueBdColor")}</td>
    <td><span class="z-bd z-blue z-text-blue z-pd3">蓝色边框</span></td>
    <td class="z-samp">.z-bd.z-blue</td>
</tr>
<tr>
    <td>蓝色按钮边框</td>
    <td class="z-samp">&#x24;{blueBtnBdColor}</td>
    <td class="z-samp">${colorMap.get("blueBtnBdColor")}</td>
    <td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("blueBtnBdColor")};background-color:${colorMap.get("blueBdColor")};">蓝色按钮</div></td>
    <td rowspan="2" class="z-bd-l">
    <div>
        <div class="z-button z-blue">蓝色按钮</div>
        <div class="z-button z-bordered-bg z-blue-bg">蓝色按钮</div>
        <div class="z-button z-bordered-bg z-blue-bd z-blue-bg">蓝色按钮</div>
        （按钮、筛选按钮）
    </div>
    <div class="z-mg-t10">
        <div class="z-button z-bordered z-blue-bd">蓝色按钮</div>
        <div class="z-button z-bordered z-blue-bd z-hover">蓝色按钮</div>
        <div class="z-button z-bordered z-blue-bd z-active">蓝色按钮</div>
        （多选按钮三种状态）
    </div>
    </td>
</tr>
<tr>
    <td>蓝色hover背景</td>
    <td class="z-samp">&#x24;{blueHoverColor}</td>
    <td class="z-samp">${colorMap.get("blueHoverColor")}</td>
    <td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("blueBtnBdColor")};background-color:${colorMap.get("blueHoverColor")};">蓝色按钮</div></td>
</tr>
</table>

<#--紫色 -->
<div class="tutorial title">紫色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="15%">名称</td>
    <td width="22%">通配符</td>
    <td width="14%">缺省值</td>
    <td width="10%">举例</td>
    <td width="*">说明</td>
</tr>
<tr>
    <td>紫色文本</td>
    <td class="z-samp">&#x24;{purpleTextColor}</td>
    <td class="z-samp">${colorMap.get("purpleTextColor")}</td>
    <td><span class="z-text-purple">紫色文本</span></td>
    <td class="z-samp">.z-text-purple</td>
</tr>
<tr>
    <td>紫色背景</td>
    <td class="z-samp">&#x24;{purpleBgColor}</td>
    <td class="z-samp">${colorMap.get("purpleBgColor")}</td>
    <td class="z-bg-purple"><span class="z-text-purple">紫色背景</span></td>
    <td class="z-samp">.z-bg-purple</td>
</tr>
<tr>
    <td>紫色边框</td>
    <td class="z-samp">&#x24;{purpleBdColor}</td>
    <td class="z-samp">${colorMap.get("purpleBdColor")}</td>
    <td><span class="z-bd z-purple z-text-purple z-pd3">紫色边框</span></td>
    <td class="z-samp">.z-bd.z-purple</td>
</tr>
<tr>
    <td>紫色按钮边框</td>
    <td class="z-samp">&#x24;{purpleBtnBdColor}</td>
    <td class="z-samp">${colorMap.get("purpleBtnBdColor")}</td>
    <td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("purpleBtnBdColor")};background-color:${colorMap.get("purpleBdColor")};">紫色按钮</div></td>
    <td rowspan="2" class="z-bd-l">
    <div>
        <div class="z-button z-purple">紫色按钮</div>
        <div class="z-button z-bordered-bg z-purple-bg">紫色按钮</div>
        <div class="z-button z-bordered-bg z-purple-bd z-purple-bg">紫色按钮</div>
        （按钮、筛选按钮）
    </div>
    <div class="z-mg-t10">
        <div class="z-button z-bordered z-purple-bd">紫色按钮</div>
        <div class="z-button z-bordered z-purple-bd z-hover">紫色按钮</div>
        <div class="z-button z-bordered z-purple-bd z-active">紫色按钮</div>
        （多选按钮三种状态）
    </div>
    </td>
</tr>
<tr>
    <td>紫色hover背景</td>
    <td class="z-samp">&#x24;{purpleHoverColor}</td>
    <td class="z-samp">${colorMap.get("purpleHoverColor")}</td>
    <td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("purpleBtnBdColor")};background-color:${colorMap.get("purpleHoverColor")};">紫色按钮</div></td>
</tr>
</table>
${zhiqim_com_chapter()}
</div>

<!-- 主体结束  -->
</div>

<!-- 容器结束  -->
</div>
${zhiqim_com_footer()}